﻿var steps = [

   function() {
      // start by being sure everyone realizes everything in javascript is an object -- including functions!
      // first create a simple javascript function and show its type
      function log(msg) { if (console) console.log(msg); }
      log('log: ' + typeof log);

      // now the magic: add a property and function to the above function!
      log.message = 'holy crap!!';
      log.freakOut = function() { log(log.message); }
      log('log.message: ' + typeof log.message);
      log('log.freakOut: ' + typeof log.freakOut);
      log.freakOut();
   },

   function() {
      function log(msg) { if (console) console.log(msg); }
      // just want to introduce everyone to the DOLLAR!
      log('typeof $: ' + typeof $);
      for (key in $) log('$.' + key + '         (' + typeof $[key] + ')');
      for (key in $.fn) log('$.fn.' + key + '         (' + typeof $.fn[key] + ')');
   },

   // ~ 15 minutes here

   function() {
      // in this step, I want to show you two things:
      //    - how to create new DOM elements on the fly
      //    - how and when you can select existing DOM elements

      var helloWorldDiv = $('<div>').addClass('helloWorldDiv').text('hello world');
      $('#div1').append(helloWorldDiv); // fails

      $(function() {
         var helloWorldDiv = $('<div>').addClass('helloWorldDiv').text('hello world');
         $('#div1').append(helloWorldDiv); // works
      });
   },

   function() {
      function log(msg) { if (console) console.log(msg); }
      // in this step, I want to dive right into making our first jQuery extension
      $.fn.appendHellowWorldDiv = function() {

         return this.each(function() { $(this).append(createTheDiv()); });

         // extracted method to demonstrate making use of the enclosure
         function createTheDiv() {
            return $('<div>').addClass('helloWorldDiv').text('hello world')
                     .css('border', 'solid 2px red').css('margin', '5px');
         }

      };

      $(function() {
         $('.myDiv').appendHellowWorldDiv();
         $('.myDiv:last').appendHellowWorldDiv();
      });

      // notice our new extension
      for (key in $.fn)
         log('$.fn.' + key);

      // notice the method not exposed (only visible in the enclosure)
      for (key in $.fn.appendHellowWorldDiv)
         log('$.fn.appendHellowWorldDiv.' + key);
   },

   // ~ 30 minutes here

];

steps[3]();
